<!DOCTYPE html>
<!-- saved from url=(0122)http://www.17sucai.com/preview/396215/2017-06-15/%E5%AE%9E%E7%94%A8%E7%9A%84%E5%85%85%E5%80%BC%E9%A1%B5%E9%9D%A2/demo.html -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="/js/plugins/recharge/new_file.css">
    <link rel="stylesheet" href="/css/travel.css"/>
    <script type="text/javascript" src="/js/plugins/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/js/plugins/form/jquery.form.js"></script>
    <script type="text/javascript" src="/js/plugins/recharge/new_file.js"></script>
    <link rel="stylesheet" href="/js/plugins/recharge/layer.css">
    <script type="text/javascript" src="/js/plugins/recharge/layer.js"></script>
    <link href="/js/plugins/recharge/layer(1).css" type="text/css" rel="styleSheet" id="layermcss">
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/css/dialog.css">
    <script src="/js/plugins/dialog2/js/dialog.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/js/mall/base.css">
    <link rel="stylesheet" type="text/css" href="/js/mall/list.css">
    <link rel="stylesheet" type="text/css" href="/js/mall/mui.min.css">
    <link rel="stylesheet" type="text/css" href="/js/mall/loaders.min.css">
    <link rel="stylesheet" type="text/css" href="/js/mall/loading.css">
    <script src="/js/mall/rem.js"></script>
    <link href="/js/plugins/wallet/style.css" rel="stylesheet" type="text/css">
    <title>骡窝窝积分商城</title>
    <script>
        $(function () {
            var page = $('#currentPage');
            var pages;
            var travelArr = [];
            function send() {
                $.get("/commodities", {currentPage: page.val(), pageSize: 5}, function (data) {
                    $.merge(travelArr, data.list);
                    $('.bottom').renderValues({list: travelArr}, {
                        getHref: function (item, value) {
                            var href = $(item).data('href');
                            $(item).attr('href', href + value);
                        }
                    });
                    page.val(parseInt(page.val()) + 1);
                    pages = data.pages;
                });
            }
            send();
            $(window).scroll(function () {
                if ($(document).scrollTop() + $(window).height() >= $(document).height()) {
                    if (page.val() <= pages) {
                        send();
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            infoText: '已经到底啦！',
                            autoClose: 1500,
                            position: 'bottom'  // center: 居中; bottom: 底部
                        });
                    }
                }
            });
        });
        function change(ele) {
            var id = $(ele).data('id');
            $.post("/commodityForm",{commodityId:id},function (data) {
                if (data.success){
                    $(document).dialog({
                        type : 'confirm',
                        style: 'IOS',
                        titleShow:false,
                        content: '兑换成功',
                        buttons: [
                            {
                                name: '确定',
                                callback: function() {
                                    window.location.href="/mall.html";
                                }
                            }
                        ]
                    });
                }else {
                    $(document).dialog({
                        titleShow:false,
                        content: data.msg,
                    });
                }
            });
        }
    </script>

</head>
<body>
<input type="hidden" name="currentPage" id="currentPage" value="1">
<!--头部  star-->
<header class="mui-bar mui-bar-nav" id="header">
    <a class="btn" href="javascript:history.go(-1)">
        <i class="icon icon-return"></i>
    </a>
    <h4>商品列表</h4>
</header>
<div class="warp clearfloat">
    <div class="lists clearfloat">
        <div class="bottom clearfloat">
            <div render-loop="list">
                <div class="lie clearfloat">
                    <div class="tu clearfloat fl">
                        <img render-src="list.coverUrl">
                    </div>
                    <div class="right clearfloat fl">
                        <p class="tit" render-html="list.name"></p>
                        <div class="xia clearfloat">
                            <span render-html='list.integral'></span>积分&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            销量：<span render-html="list.salesVolume"></span>
                        </div>
                        <button type="button" onclick="change(this);" render-attr="data-id=list.id">兑换</button>
                        <script>
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>